<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>瑞成火锅</title>
  <link href="https://cdn.staticfile.net/twitter-bootstrap/5.1.1/css/bootstrap.min.css" rel="stylesheet">
  <!-- 引入样式 -->
  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
  <link rel="stylesheet" href="../css/common.css">
  <link rel="stylesheet" href="../css/contact.css">
  <!-- 引入组件库 -->
  <script src="https://unpkg.com/vue@2/dist/vue.js"></script>
  <script src="https://unpkg.com/element-ui/lib/index.js"></script>
  <script src="../js/jquery.min.js"></script>
  <script src="https://cdn.staticfile.net/twitter-bootstrap/5.1.1/js/bootstrap.bundle.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/gsap@3.12.5/dist/gsap.min.js"></script>
  <script src="https://cdn.staticfile.org/vue-resource/1.5.1/vue-resource.min.js"></script>
  <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<style>
  .item_info {
    padding: 20px 0 0 20px;
  }

  .item {
    display: none;
  }

  .el-tabs__item {
    color: #fff;
  }

  .el-tabs--card>.el-tabs__header {
    border: 0;
  }

  .el-tabs__item.is-active {
    background-color: #c81623;
    color: #fff;
  }

  .el-tabs--left.el-tabs--card .el-tabs__nav {
    margin-top: 65%;
    width: 160px;
    text-align: center;
  }

  .el-tabs--left.el-tabs--card .el-tabs__item.is-left {
    text-align: center;
  }

  .el-tabs--left,
  .el-tabs--right {
    width: 80%;
  }

  .div_div_div_div {
    width: 30%;
    background-color: #fff;
    margin-right: 3%;
    margin-top: 3%;
  }
</style>

<body>
  <div id="dishes" style="background-color: #18198f;">
    <div style="width: 100%;height: 100%;">
      <header>
        <div style="display: flex; padding-top: 2%; padding-left: 3%;">
          <div style="flex: 1;">
            <div style="display: flex; padding-left: 5%;">
              <img src="../img/logo3.png" width="150px" alt="">
              <!-- <h3 style="color: #fff;">瑞成火锅</h3> -->
            </div>
          </div>
          <div class="div_header_div_ul">
            <div style="width: 80%;margin-top: 1.5%;">
              <ul style="display: flex;">
                <li><a href="./home.html">首页</a></li>
                <li><a href="./Century-old_brand.html">百年品牌</a></li>
                <li><a href="./Brand_strength.html">品牌实力</a></li>
                <li><a href="./cooperation.html">特许合作</a></li>
                <li><a href="./Legendary_dishes.html">传奇菜品</a></li>
                <li><a href="./Store_navigation.html">门店导航</a></li>
                <li><a href="./contact.html">联系我们</a></li>
                <li><a href="./message.html">留言</a></li>
                <li id="li_1"><a href="./login.html">登录/注册</a></li>
                <li id="li_2"><a href="./userInfo.html">个人中心</a></li>
              </ul>
            </div>
            <div style="margin-top: 1.5%;">
              <input type="text" style=" border: 1 solid #181890; height: 30px; width: 150px;border-radius: 0;"
                v-model="name">
              <button style="border: 0;padding: 3px 5px;background-color: #fff;" @click="page_init()">搜索</button>
            </div>
          </div>
        </div>
      </header>
      <!-- 大图片 -->
      <section style="padding-bottom: 5%;">
        <div style="display: flex; color: #fff;">
          <div style="padding-left: 5%;padding-top: 10%; width: 20%;">
            <img src="../img/slogan_food.png" width="100%" alt="">
          </div>
          <el-tabs :tab-position="tabPosition" v-model="activeName" type="card" @tab-click="handleClick">
            <el-tab-pane style="margin: 5% 0;" label="传奇菜品" name="传奇菜品" value="传奇菜品">
              <div class="item" style="display: block;margin-left: 10%;">
                <iframe src="./chuanqicaipin.html" width="80%" height="600px" frameborder="0"></iframe>
              </div>
            </el-tab-pane>
            <el-tab-pane style="margin: 5% 5%;" label="所有菜品" name="所有菜品" value="所有菜品">
              <div style="display: flex; flex-wrap: wrap;">
                <div class="div_div_div_div" v-for="item in tableData" :key="item.id">
                  <img :src="url+'/download/'+item.img" width="100%" height="400px" alt="">
                  <div style="color: #000; display: flex;padding-left: 3%;">
                    <h4 style="margin-top: 3%;margin-right: 60%;">{{ item.name }}</h4>
                    <img @click="queryBuy(item)" src="../img/钱袋.png" width="30px" alt="">
                  </div>
                </div>
              </div>
              <div style="text-align: center;margin-top: 2%;">
                <el-pagination background layout="prev, pager, next" :current-page="current" :total="total"
                  @current-change="currentPage" :page-size="6">
                </el-pagination>
              </div>
            </el-tab-pane>
            <el-tab-pane label="荤菜" name="荤菜" value="荤菜">
              <div style="display: flex; flex-wrap: wrap;">
                <div class="div_div_div_div" v-for="item in tableData" :key="item.id">
                  <img :src="url+'/download/'+item.img" width="100%" height="400px" alt="">
                  <div style="color: #000; display: flex;padding-left: 3%;">
                    <h4 style="margin-top: 3%;margin-right: 60%;">{{ item.name }}</h4>
                    <img src="../img/钱袋.png" width="30px" alt="">
                    <img @click="queryBuy(item)" src="../img/钱袋.png" width="30px" alt="">
                  </div>
                </div>
              </div>
              <div style="text-align: center;margin-top: 2%;">
                <el-pagination background layout="prev, pager, next" :current-page="current" :total="total"
                  @current-change="currentPage" :page-size="6">
                </el-pagination>
              </div>
            </el-tab-pane>
            <el-tab-pane label="素菜" name="素菜" value="素菜">
              <div style="display: flex; flex-wrap: wrap;">
                <div class="div_div_div_div" v-for="item in tableData" :key="item.id">
                  <img :src="url+'/download/'+item.img" width="100%" height="400px" alt="">
                  <div style="color: #000; display: flex;padding-left: 3%;">
                    <h4 style="margin-top: 3%;margin-right: 60%;">{{ item.name }}</h4>
                    <img @click="queryBuy(item)" src="../img/钱袋.png" width="30px" alt="">
                  </div>
                </div>
              </div>
              <div style="text-align: center;margin-top: 2%;">
                <el-pagination background layout="prev, pager, next" :current-page="current" :total="total"
                  @current-change="currentPage" :page-size="6">
                </el-pagination>
              </div>
            </el-tab-pane>
            <el-tab-pane label="锅底" name="锅底" value="锅底">
              <div style="display: flex; flex-wrap: wrap;">
                <div class="div_div_div_div" v-for="item in tableData" :key="item.id">
                  <img :src="url+'/download/'+item.img" width="100%" height="400px" alt="">
                  <div style="color: #000; display: flex;padding-left: 3%;">
                    <h4 style="margin-top: 3%;margin-right: 60%;">{{ item.name }}</h4>
                    <img @click="queryBuy(item)" src="../img/钱袋.png" width="30px" alt="">
                  </div>
                </div>
              </div>
              <div style="text-align: center;margin-top: 2%;">
                <el-pagination background layout="prev, pager, next" :current-page="current" :total="total"
                  @current-change="currentPage" :page-size="6">
                </el-pagination>
              </div>
            </el-tab-pane>
            <el-tab-pane label="小吃" name="小吃" value="小吃">
              <div style="display: flex; flex-wrap: wrap;">
                <div class="div_div_div_div" v-for="item in tableData" :key="item.id">
                  <img :src="url+'/download/'+item.img" width="100%" height="400px" alt="">
                  <div style="color: #000; display: flex;padding-left: 3%;">
                    <h4 style="margin-top: 3%;margin-right: 60%;">{{ item.name }}</h4>
                    <img @click="queryBuy(item)" src="../img/钱袋.png" width="30px" alt="">
                  </div>
                </div>
              </div>
              <div style="text-align: center;margin-top: 2%;">
                <el-pagination background layout="prev, pager, next" :current-page="current" :total="total"
                  @current-change="currentPage" :page-size="6">
                </el-pagination>
              </div>
            </el-tab-pane>
            <el-tab-pane label="饮料" name="饮料" value="饮料">
              <div style="display: flex; flex-wrap: wrap;">
                <div class="div_div_div_div" v-for="item in tableData" :key="item.id">
                  <img :src="url+'/download/'+item.img" width="100%" height="400px" alt="">
                  <div style="color: #000; display: flex;padding-left: 3%;">
                    <h4 style="margin-top: 3%;margin-right: 60%;">{{ item.name }}</h4>
                    <img @click="queryBuy(item)" src="../img/钱袋.png" width="30px" alt="">
                  </div>
                </div>
              </div>
              <div style="text-align: center;margin-top: 2%;">
                <el-pagination background layout="prev, pager, next" :current-page="current" :total="total"
                  @current-change="currentPage" :page-size="6">
                </el-pagination>
              </div>
            </el-tab-pane>
          </el-tabs>
        </div>
      </section>
    </div>
    <!-- 页尾 -->
    <footer style="background-color: #000; padding: 3% 15%;">
      <div style="display: flex;">
        <div style="display: flex; width: 80%; flex-wrap: wrap;">
          <h6 class="footer_h6">首页</h6>
          <h6 class="footer_h6">百年品牌</h6>
          <h6 class="footer_h6">品牌实力</h6>
          <h6 class="footer_h6">特许合作</h6>
          <h6 class="footer_h6">传奇菜品</h6>
          <h6 class="footer_h6">门店导航</h6>
          <h6 class="footer_h6">联系我们</h6>
          <div style="width: 100%;padding-left: 3%;">
            <span class="footer_span">友情链接： 火锅加盟 美兆品牌 辣斗辣火锅</span><br>
            <span class="footer_span"> 蜀ICP备123456789号 网站建设：瑞成火锅</span><br>
            <span class="footer_span">风险提示：投资有风险，请理性选择</span>
          </div>
        </div>
        <div>
          <img src="../img/erweima.jpg" width="150px" alt="">
        </div>
      </div>
    </footer>
    <!-- 立即购买弹窗 -->
    <el-dialog title="购买" :visible.sync="dialogVisible" width="30%">
      <span>该商品的价格为<span style="color: red;">{{dataForm.price}}￥</span>,确定要购买吗？</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="addOrders(dataForm)">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</body>
<script>
  // 当页面刚加载完时调用
  window.onload = function () {
    if (localStorage.getItem("userId")) {
      // 说明已经登录
      let li_1 = document.getElementById('li_1');
      li_1.style.display = "none";
      let li_2 = document.getElementById('li_2');
      li_2.style.display = 'block';
      return;
    } else {
      //没有登录
      let li_1 = document.getElementById('li_1');
      li_1.style.display = "block";
      let li_2 = document.getElementById('li_2');
      li_2.style.display = 'none';
      return;
    }
  }
</script>
<script>
  $(function () {
    $(".tab_list li").click(function () {
      $(this).addClass("current").siblings().removeClass("current");
      let index = $(this).index();
      $(".tab_con .item").eq(index).show().siblings().hide();
    });
  })
</script>
<script>
  new Vue({
    el: '#dishes',
    data() {
      return {
        tabPosition: 'left',
        activeName: '传奇菜品',
        url: 'http://localhost:9092/common',
        current: 1,
        total: 1,
        name: '',
        tableData: [],
        ruleForm: {},
        dataForm: {},
        dialogVisible: false
      }
    },
    created() {
      if (localStorage.getItem("name") !== null) {
        this.activeName = "所有菜品";
        this.name = localStorage.getItem("name");
      }
      this.page_init();
    },
    methods: {
      // 打开弹窗
      queryBuy(row) {
        this.dataForm = {};
        this.dialogVisible = true;
        this.dataForm = row;
      },
      // 当点击分类时调用
      handleClick(el) {
        this.activeName = el.$attrs.value;
        if (this.activeName == "所有菜品") {
          this.page_init();
        } else {
          this.type_init();
        }
      },
      // 当切换页面时调用
      currentPage(val) {
        this.current = Number(val);
        this.page_init();
      },
      // 分页查询
      async page_init() {
        this.tableData = [];
        // 判断是否需要进行搜索查询
        if (this.name != "") {
          const { data: result } = await this.$http.get("http://localhost:9092/hot_goods/search/" + this.current + "/" + this.name);
          if (result.flag) {
            // 数据
            this.tableData = result.list;
            // 当前页
            this.current = result.current;
            // 总条数
            this.total = result.total;
          } else {
            this.$message.info(result.message)
          }
          this.name = "";
        } else {
          const { data: result } = await this.$http.get("http://localhost:9092/hot_goods/page/" + this.current);
          if (result.flag) {
            // 数据
            this.tableData = result.list;
            // 当前页
            this.current = result.current;
            // 总条数
            this.total = result.total;
          } else {
            this.$message.info(result.message)
          }
        }
      },
      // 分类查询
      async type_init() {
        this.tableData = [];
        const { data: result } = await this.$http.get("http://localhost:9092/hot_goods/queryType/" + this.current + "/" + this.activeName);
        if (result.flag) {
          // 数据
          this.tableData = result.list;
          // 当前页
          this.current = result.current;
          // 总条数
          this.total = result.total;
        } else {
          this.$message.info(result.message)
        }
      },
      // 购买
      async addOrders(row) {
        if (!localStorage.getItem("userId")) {
          window.location.href = './login.html';
          return;
        }
        this.ruleForm.goodsName = row.name;
        this.ruleForm.goodsImg = row.img;
        this.ruleForm.totalPrice = row.price;
        this.ruleForm.goodsCount = 1;
        this.ruleForm.goodsType = row.type;
        this.ruleForm.uid = localStorage.getItem("userId");
        this.ruleForm.sid = row.id;
        console.log(this.ruleForm);
        const { data: result } = await this.$http.post("http://localhost:9092/hot_orders/insert", this.ruleForm);
        if (result.flag) {
          this.$message.success(result.message)
        } else {
          this.$message.error(result.message)
        }
        this.dialogVisible = false;
        this.ruleForm = {};
      }
    }
  })
</script>

</html>